<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工具集装箱 - 2018</title>
    <link rel="stylesheet" th:href="@{bootstrap-4.0.0-dist/css/bootstrap.css}"type="text/css"/>
    <link rel="stylesheet" th:href="@{css/main.css}"type="text/css"/>
    <script src="https://use.typekit.net/xzp1tcb.js"></script>
    <script>
        try { Typekit.load({ async: true }); } catch (e) {}
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<nav class="navbar sticky-top navbar-light bg-white">
    <ul class="top-nav fw-3 fs-sm py-2">
        <li class="nav-item"><a href="#">办公工具</a></li>
        <li class="nav-item"><a href="#">爬虫工具</a></li>
        <li class="nav-item"><a href="#">BUG反馈</a></li>
        <li class="nav-item"><a href="#">WEB介绍</a></li>
    </ul>
</nav>

<div class="hero-background">
    <svg class="noise" xmlns='http://www.w3.org/2000/svg'>
        <defs>
            <filter id="noise" y="0" x="0">
                <feTurbulence class="basefrequency" stitchTiles="stitch" baseFrequency=".75" type="fractalNoise" />
            </filter>
            <pattern id="pattern" class="tile1" patternUnits="userSpaceOnUse" height="100" width="100" y="0" x="0">
                <rect class="bg" x="0" y="0" width="100%" height="100%" fill="transparent" />
                <rect class="opacity" x="0" y="0" width="100%" height="100%" filter="url(#noise)" opacity=".5" />
            </pattern>
        </defs>
        <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
    </svg>
    <div id="early-bird-list" class="container">
        <div class="text-center">
            <div class="headline">
                <div class="logo mb-6">
                    <img src="img/logo-background.png">
                </div>
                <div class="mx-4">
                    <a href="#">
                        <button class="btn btn-red btn-xl fs-lg text-white fw-3" type="button" style="cursor: pointer;">Sold Out!</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <section id="sponsors">
        <div class="container py-6">
            <div class="d-flex pb-3">
                <div class="fw-3 fs-xl mb-4">工具分类</div>
                <div class="ml-auto">
                    <a href="/Sponsors.pdf"><button class="btn btn-red text-white fw-3 py-2 px-3" type="button" style="cursor: pointer;">更多>></button>
                    </a>
                </div>
            </div>
            <div class="mb-4">
                <div class="bb-faded">
                    <h3 class="fw-1 fs-md mb-3">办公类</h3>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/excel.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/json.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/excel.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/excel.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/excel.png">
                        </a>
                    </div>
                </div>
            </div>
            <div class="mb-4">
                <div class="bb-faded">
                    <h3 class="fw-1 fs-md mb-3">爬虫类</h3>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="/novel/novelIndex" class="partner-logo-container clearfix">
                            <img src="img/Novlereptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#/" class="partner-logo-container img-png clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <a href="#" class="partner-logo-container clearfix">
                            <img src="img/reptile.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="legal" class="bg-dark-warm">
        <div class="container py-5">
            <div class="legal fs-xs lh-xs tc-warm">
                <p>©VAIE。保留所有权利。</p>
                <p>请在微信公众平台上关注我们
                    <a class="tc-light-red" href="https://www.twitter.com/LaraconUS">@vaie</a>
                    或者使用邮箱联系我们
                    <a class="tc-light-red" href="mailto:&#116;&#097;&#121;&#108;&#111;&#114;&#064;&#108;&#097;&#114;&#097;&#118;&#101;&#108;&#046;&#099;&#111;&#109;">
                        vaielx@163.com
                    </a>.
                </p>
            </div>
        </div>
    </section>
</div>

<script>
    var app = new Vue({
        el: '#early-bird-list',

        data: {
            email: '',
            joinedList: false
        },

        methods: {
            joinEarlyBirdList: function () {
                axios.post('/list', { email: this.email });

                this.joinedList = true;
            }
        }
    });
</script>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>